<template>
    <view class="imag-list">

     
            <view v-for="(item,index) in list" :key="index" class="item" @tap="toPicList(index)">
                <view class="del"  @tap.stop="del(index)">
                    <image src="/static/images/del-icon.png"  />
                </view>
                <image :src="item" class="bg" mode="aspectFill" />
            </view>
       

        <view class="item" @tap="addImag" v-if="list.length < maxCount">
            <image src="/static/images/upmedia_bg.png"  class="bg"/>
        </view>

     


    </view>
</template>
<script>

import {postUpLoadFile} from '@/request/actions'


export default {
   
        props:{
       
            maxCount:{
                type:[String,Number],
                default:3
            },
            cb:{
                type:String,
                default:'getImag'
            },
            images:{
                type:Array,
                default:[]
            }
        },
        data(){
            return{
                 list:[]
            }
           
          
        },
        methods:{

            toPicList(i){
                this.$emit('setPicList',{
                    list:this.list,
                    idx:i
                })
            },
          
                addImag(){

                    let maxCount = this.maxCount;
                    let count = maxCount - this.list.length;
                      

                    uni.chooseImage({
                        count,
                        sizeType:'compressed',
                        success: res => {
                                let imags = []
                                if(res.errMsg == "chooseImage:ok"){
                                    
                                    imags = res.tempFilePaths

                                  
                                   
                            imags.forEach(path => {

                                            postUpLoadFile(path).then(r=>{
                                           
                                                    let {data:res} = r;
                                                    res = JSON.parse(res);
                                                    
                                                    if(res.status == 200){
                                                        
                                                        this.list.push(res.data);
                                                        this.list.length >=maxCount && (this.list.length = maxCount);
                                                        this.$emit('setImages',this.list);
                                                        this.$emit('setaddImage',res.data);
                                                  
                                                  }
                                                    
                                                    
                                                    
                                                    
                                                  
                                                   
                                                })

                               
                            });



                          }
                              
                                   
                               
                        


                            }
                        })

             
                },
                del(i){
                    let arr = this.list;
                    arr.splice(i,1);
                    this.list = arr;
                    this.$emit('setImages',this.list);
                    this.$emit('setDelImageIdx',i);
                  
                   
                }
        },
        watch:{
            images(n,o){
            
                if(n.length){
                    this.list = [];
                    n.forEach(item=>{
                        this.list.push(item.imagesPath)
                    })
                  
             
                }
            }
        }
      
}
</script>
<style lang="scss">
    .imag{
        &-list{
            .item{
                display: inline-block;
                width: 145rpx;
                height: 145rpx;
                position: relative;
                margin-right: 10rpx;
                border-radius: 10rpx;
                overflow: hidden;
                &:last-child{
                    margin-bottom: 0;
                }
                 .bg{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    z-index: 1;
                }
                .del{
                    position: absolute;
                    bottom:0;
                    right:0;
                    left:0;
                    height: 40rpx;
                    background: rgba(0,0,0,0.6);
                    z-index: 2;
                    image{
                        height: 30rpx;
                        width: 30rpx;
                        margin: 5rpx auto 0;
                        display: block;
                    }
                }
            }
           
        }
    }


    .bigPic{


    position: relative;
    z-index: 2;
    height: 100vh;
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 900;
    background: #000;
    swiper{
           width: 100%;
        height: 100vh;
    }
    image{
        width: 100%;
        height: 100vh;
    }
    
    .nums{
        position: absolute;
        bottom:10rpx;
        right:10rpx;
        color:#fff;
        font-size: 24rpx;
        background: rgba(0,0,0,.4);
        padding: 0 8px;
        border-radius: 18rpx;
        line-height: 36rpx;
        height:36rpx;
        
    }
   
}
</style>
